<template>
	<view class="gui-relative" style="height:100vh;">
		<view>
			<view class="gui-box-shadow-md gui-border-box gui-relative gui-padding">
				<image :src="activity.post" mode="widthFix" style="width:100%;will-change: transform;" class="gui-border-radius">
				</image>
				<view class="gui-absolute-rb gui-h3 gui-color-white gui-bold" style="right:60rpx;bottom:60rpx;">
					{{activity.title}}
				</view>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding gui-flex gui-space-between gui-align-items-center" style="height:156rpx;">
				<view class="">
					<view class="gui-flex gui-justify-content-start gui-align-items-center">
						<u-icon name="bookmark-fill" color="#2979ff" size="32"></u-icon>
						<text class="gui-h6 gui-boldder">{{activity.title}}</text>
					</view>
					<view class="">
						<text class="gui-text-small gui-color-gray">开课时间:{{activity.start_time}}</text>
					</view>
				</view>
				<view class="gui-color-red1 gui-h3" style="height:156rpx;line-height: 156rpx;">
					<text class="gui-h4">￥</text>
					<text class="gui-h2">{{activity.price}}</text>
					<text class="gui-h4">元</text>
				</view>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding">
				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="tags-fill" color="#2979ff" size="32"></u-icon>
					<text
						class="gui-h6 gui-boldder">{{activity.Groupcourse?activity.Groupcourse.course_type.name:''}}</text>
				</view>
				<view class="gui-flex">
					<text class="gui-text-small gui-color-gray">训练强度:</text>
					<u-rate v-model="activity.Groupcourse.intensity" count="5" readonly activeColor="#ffa502"></u-rate>
				</view>
				<view class="gui-flex gui-align-items-center">
					<text class="gui-text-small gui-color-gray">课卡颜色:</text>
					<view style="width:48rpx;height:32rpx;border-radius: 4rpx;"
						:style="{backgroundColor:activity.Groupcourse.color}">
					</view>
					<!-- <u-rate :value="activity.Groupcourse.intensity" readonly></u-rate> -->
				</view>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding">
				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="gift-fill" color="#2979ff" size="32"></u-icon>
					<text class="gui-h6 gui-boldder">活动内容</text>
				</view>
				<view class="gui-padding">
					<rich-text :nodes="activity.introduce"></rich-text>
				</view>
			</view>
			<view class="" style="height: 180rpx;">

			</view>
		</view>
		<view class="pay-btn">
			<view class="pay-btn-warp">
				<up-button @tap="callPay" size="large" type="primary" color="linear-gradient(45deg,#52e5e7,#130cb7)"
					shape="circle" text="立即下单">
				</up-button>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { onMounted, ref } from 'vue'
	import useActivity from '@/api/activity'
	import request from '@/utils/request'
	const guiPage = ref()

	const { showActivity, activity } = useActivity()
	const id = ref()
	onLoad((options) => {
		id.value = (+options.id)
	})
	onMounted(async () => {
		await showActivity(id.value)
	})
	const callPay = async () => {
		uni.showLoading({
			title: "支付中..."
		})
		const order = await request.post(`mini/order`, {
			active_id: id.value,
			price: activity.value.price,
			payment_type: "wechat"
		});
		//发送支付请求（获取支付订单号）
		const orderInfo = await request.post(`mini/pay/${order.ID}`, order);

		//拉起小程序支付
		if (!orderInfo) {
			return uni.showToast({
				icon: 'error',
				content: '支付失败'
			});
		}
		uni.requestPayment({
				provider: 'wxpay',
				timeStamp: orderInfo['timeStamp'],
				nonceStr: orderInfo['nonceStr'],
				package: orderInfo['package'],
				signType: orderInfo['signType'],
				paySign: orderInfo['paySign'],
				success: (res) => {
					uni.hideLoading()
					uni.showToast({
						icon: "success",
						title: "支付成功"
					})
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/index/index"
						})
					}, 1000)
				},
				fail: (err) => {
					uni.hideLoading()
					console.log('fail:' + JSON.stringify(err));
				},
				complete() {
					uni.hideLoading()
				}
			})
	}
</script>
<style scoped lang="scss">
	.custom-style {
		color: white;
		background-color: red;
	}

	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}
</style>